import * as React from 'react';
import classNames from 'classnames';
import { ComponentSize, ComponentType } from '../types';

import './index.scss';

export type ButtonType = ComponentType;
type ButtonSize = ComponentSize;

interface ButtonkProps {
  onClick?: React.MouseEventHandler | undefined;
  type?: ButtonType;
  size?: ButtonSize;
  round?: boolean;
}

export class Button extends React.Component<ButtonkProps> {
  render() {
    const { children, onClick, type, size, round } = this.props;
    return (
      <button
        className={classNames('x-btn', `x-btn-${type || 'default'}`, size && `x-btn-${size}`, round && 'x-btn-round')}
        onClick={onClick}
      >
        {children}
      </button>
    );
  }
}
